<template>
  <transition name="slide">
    <div class="add-song" v-show="addShowList" @click.stop>
      <div class="header">
        <h1 class="title">添加歌曲列表</h1>
        <div class="close" @click="hide">
          <i class="icon-close"></i>
        </div>
      </div>
      <div class="search-box-wrapper">
        <SearchBox :placeholder="placeholder" @query="changeQyery" ref="searchBoxRef"></SearchBox>
      </div>
      <div class="shortcut" v-show="!query">
        <Switches :switchArr="switchArr" :switchIndex="switchIndex" @clickSwitches="clickSwitches"></Switches>
        <div class="list-wrapper">
          <Scroll class="list-scroll" v-show="switchIndex === 0" :data="playHistory" ref="listScr">
            <div class="list-inner">
              <SongList :songs="playHistory" @select="addSongClick"></SongList>
            </div>
          </Scroll>
          <Scroll class="list-scroll" :refreshDelay="refreshDelay" v-show="switchIndex === 1" :data="playHistory" ref="listScroll">
            <div class="list-inner">
              <search-list :searches="searchHistory" @select="changeSearch" @delateHistory="delateSearchHistory"></search-list>
            </div>
          </Scroll>
        </div>
      </div>
      <div class="search-result" v-show="query">
        <Sugest :query="query" :showSinger="showSinger" @select="saveSearch" @changeScroll="changeScroll"></Sugest>
      </div>
      <TopTips ref="topTipsRef">
        <div class="tip-title">
          <i class="icon-ok"></i>
          <span class="text">1首歌曲已经添加到播放队列</span>
        </div>
      </TopTips>
    </div>
  </transition>
</template>

<script>
  import SearchBox from 'base/search-box/SearchBox';
  import Sugest from 'components/sugest/Sugest';
  import {
    searchMixin
  } from 'common/js/mixin';
  import Switches from 'base/switches';
  import Scroll from 'base/scroll/scroll';
  import SongList from 'base/song-list/SongList';
  import {
    mapGetters,
    mapActions
  } from 'vuex';
  // import {musicInfo} from 'common/js/singer';
  import Song from 'common/js/song';
  import TopTips from 'base/topTips';


  export default {
    name: 'AddSong',
    mixins: [searchMixin],
    data() {
      return {
        addShowList: false,
        placeholder: '搜索歌曲',
        showSinger: false,
        switchArr: ['最近播放', '播放历史'],
        switchIndex: 0
      }
    },
    computed: {
      ...mapGetters(['playHistory'])
    },
    methods: {
      show() {
        this.addShowList = true
        if (this.switchIndex === 0) {
          setTimeout(() => {
            this.$refs.listScr.refresh()
          }, 20)
        }
        if (this.switchIndex === 1) {
          setTimeout(() => {
            this.$refs.listScroll.refresh()
          }, 20)
        }

      },
      hide() {
        this.addShowList = false
      },
      clickSwitches(index) {
        this.switchIndex = index
      },
      addSongClick(song, index) {
        if (index !== 0) {
          this.insertSong(new Song(song))
          this.topShow()
        }
      },
      saveSearch() {
        this.topShow()
      },
      topShow() {
        this.$refs.topTipsRef.show()
      },
      ...mapActions(['insertSong'])
    },
    components: {
      SearchBox,
      Sugest,
      Switches,
      Scroll,
      SongList,
      TopTips
    },
  }

</script>
